<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>setup</h2>
      <p>count: {{ count }}</p>
      <button @click="fn">count++</button>

      <hr />

      <input type="text" v-model="value" />
      <button @click="add">添加</button>
      <ul>
        <li v-for="(item, index) in list" :key="index">
          {{ item }} - <button @click="remove(index)">删除</button>
        </li>
      </ul>
    </div>

    <script src="../vue3.js"></script>
    <script>
      const { createApp, ref } = Vue;

      // 功能1
      const counter = () => {
        const count = ref(1);
        const fn = () => {
          count.value++;
        };
        return [count, fn];
      };

      // 功能2
      const todolist = () => {
        const list = ref(["张三", "里斯", "王五"]);
        const value = ref("");
        const add = () => {
          if (value.value) {
            list.value.push(value.value);
            value.value = "";
          }
        };
        const remove = (i) => {
          list.value = list.value.filter((item, index) => index !== i);
        };
        return [list, value, add, remove];
      };

      createApp({
        setup() {
          const [count, fn] = counter();
          const [list, value, add, remove] = todolist();
          // setup里面定义的内容，必须要return之后才能在template里面使用
          return {
            count: count,
            fn,
            list,
            value,
            list,
            add,
            remove,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
